<template>
    <!-- 表格 -->
    <div>
        <el-descriptions direction="vertical" :column="6" border :data="tabData">
            <el-descriptions-item label="名称">{{ tabData?.name }}</el-descriptions-item>
            <el-descriptions-item label="优惠卷类型">{{
                    tabData?.type === 0 ? '全场赠卷' :
                        tabData?.type === 1 ? '会员赠卷'
                            : tabData?.type === 2 ? '购物赠卷' :
                                tabData?.type === 3 ? '注册赠卷' : ""
            }}
            </el-descriptions-item>
            <el-descriptions-item label="可使用商品">{{
                    tabData?.useType == 0
                        ? "全场通用"
                        : tabData?.useType == 1
                            ? "指定分类"
                            : tabData?.useType == 2
                                ? "指定商品"
                                : ""
            }}
            </el-descriptions-item>
            <el-descriptions-item label="使用门槛" width="150px">满{{ tabData?.minPoint }}元可用</el-descriptions-item>
            <el-descriptions-item label="面值" width="150px">{{ tabData?.amount }}元</el-descriptions-item>
            <el-descriptions-item label="状态" width="150px">{{ tabData?.endTime > state.Time ? '未过期' : '已过期' }}
            </el-descriptions-item>
            <el-descriptions-item label="有效期" width="150px"> {{ fomatDate(tabData?.startTime) }}至{{
                    fomatDate(tabData?.endTime)
            }}
            </el-descriptions-item>
            <el-descriptions-item label="总发行数" width="150px">{{ tabData?.publishCount }}</el-descriptions-item>
            <el-descriptions-item label="已领取" width="150px">{{ tabData?.receiveCount }}</el-descriptions-item>
            <el-descriptions-item label="待领取" width="150px">{{ tabData?.publishCount - tabData?.receiveCount }}
            </el-descriptions-item>
            <el-descriptions-item label="已使用" width="150px">{{ tabData?.useCount }}</el-descriptions-item>
            <el-descriptions-item label="未使用" width="150px">{{ tabData?.publishCount - tabData?.useCount }}
            </el-descriptions-item>
        </el-descriptions>
    </div>

    <!-- 搜索框 -->
    <div class="search-box">
        <div class="flex">
            <div>
                <el-icon>
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
            </div>
            <div>
                <el-button class="bot">重置</el-button>
                <el-button class="bot" type="primary" @click="searchFn">查询搜索</el-button>
            </div>
        </div>
        <div style="padding-top: 20px">
            <!-- 在input里面回车会造成刷新，大家今晚可以尝试解决一下 -->
            <!-- 在有多个搜索框的情况下添加全部清空功能 -->
            <!-- :model="listParams" -->
            <el-form ref="searchFormRef">
                <el-form-item label="使用状态:">
                    <!-- 优惠卷选择器 -->
                    <el-select v-model="value" clearable placeholder="全部" @change="selectFn">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="订单编号:">
                    <!-- @keyup.enter 回车事件 -->
                    <!-- v-model="listParams.keyword" -->
                    <el-input placeholder="订单编号" />
                </el-form-item>
            </el-form>
        </div>
    </div>

    <!-- 表格 -->
    <div>
        <!-- :data="tableData" -->
        <el-table border ref="multipleTableRef" style="width: 100%" :data="data">
            <el-table-column prop="couponCode" label="优惠码">
            </el-table-column>
            <el-table-column property="memberNickname" label="领取会员" />
            <el-table-column label="领取方式">
                <template #default="scope">
                    {{ scope.row.getType === 1 ? '主动获取' : '' }}
                </template>
            </el-table-column>
            <el-table-column property="startDate" label="领取时间">
                <template #default="scope">
                    {{ fomatDate(scope.row.createTime) }}
                </template>
            </el-table-column>
            <el-table-column property="endDate" label="当前状态">
                <template #default="scope">
                    {{ scope.row.useStatus === 0 ? "未使用" :
                            scope.row.useStatus === 1 ? "已使用" :
                                scope.row.useStatus === 2 ? "已过期" : ''
                    }}
                </template>
            </el-table-column>
            <el-table-column property="useTime" label="使用时间"></el-table-column>
            <el-table-column label="订单编号">
                <template #default="scope">
                    {{ scope.row.orderId ? scope.row.orderId : 'N/A' }}
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <ElConfigProvider :locale="zhCn">
        <el-pagination v-model:currentPage="listParams.pageNum" v-model:page-size="listParams.pageSize" background
            layout="total, sizes, prev, pager, next ,jumper" :total="total" @size-change="pageSizeChange"
            @current-change="pageNumChange" :page-sizes="[5, 10, 20]" />
    </ElConfigProvider>
</template>

<script lang="ts" setup>
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { user } from "@/api";
import { reactive, ref, toRefs } from "vue";
import { useRoute } from "vue-router"
import { fomatDate } from "@/utils"
import { Search, Tickets } from "@element-plus/icons-vue";
const route = useRoute()
const Id = Number(route.query.id)
interface Istate {
    // tabData: cupModel,
    Time: string,
    listParams: IUserListParams,
    data: cupVipModel[],
    total: number,
    valueNum: number
}

const tabData = ref<cupModel>()

const state = reactive<Istate>({
    // tabData: {},
    Time: '',
    listParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: ''
    },
    data: [],
    total: 0,
    valueNum: 0
})
const value = ref('')
const options = [
    {
        value: 0,
        label: '未使用',
    },
    {
        value: 1,
        label: '已使用',
    },
    {
        value: 2,
        label: '已使用',
    }

]

//获取一个日期
const c = new Date()
const nowDate = (now: any) => {
    var year = now.getFullYear(); //年份
    var month = now.getMonth() + 1; //月份（0-11）
    var date = now.getDate(); //天数（1到31）
    var hour = now.getHours(); //小时数（0到23）
    var minute = now.getMinutes(); //分钟数（0到59）
    var second = now.getSeconds(); //秒数（0到59） 
    return (
        year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second
    )
}
state.Time = nowDate(c)

//单个优惠卷内容
user.getConupApi(Id).then(res => {
    if (res.code === 200) {
        tabData.value = res.data
        console.log(res.data);
    }
})


//优惠码
const getlist = () => {
    user.couponHistoryListApi({ id: Id, pageNum: state.listParams.pageNum, pageSize: state.listParams.pageSize }).then(res => {
        if (res.code === 200) {
            state.data = res.data.list
            console.log(res.data.list);
            state.total = res.data.total
        }
    })
}
getlist()


//分页功能
const pageSizeChange = () => {
    getlist()
}
const pageNumChange = () => {
    getlist()
}

//选择器
const selectFn = (val: any) => {
    state.valueNum = val

}
//查询
const searchFn = () => {
    user.searchCouponApi({ id: Id, pageNum: state.listParams.pageNum, pageSize: state.listParams.pageSize, useStatus: state.valueNum }).then(res => {
        if (res.code === 200) {
            state.data = res.data.list
            console.log(res.data.list);
            state.total = res.data.total
        }
    })
}
let { Time, listParams, data, total, valueNum } = toRefs(state)

</script>

<style lang="less" scoped>
.search-box {
    padding: 20px;
    border: 1px solid #ccc;
    margin: 30px 0;

    .flex {
        display: flex;
        justify-content: space-between;
    }

    .el-icon {
        margin-right: 10px;
    }

    .el-input {
        width: 250px;
    }
}

.el-form {
    display: flex;

    .el-form-item {
        margin-right: 50px;
    }
}
</style>